<template>
  <dv-full-screen-container class="bg">
    <div class="login-container">
      <dv-border-box-12 class="login-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
        <div class="login-content">
          <div class="login-header">
            <h2>智慧大棚管理系统</h2>
          </div>
          <div class="login-form">
            <div class="form-item">
              <div class="input-wrapper">
                <i class="iconfont icon-user"></i>
                <input
                    type="text"
                    v-model="username"
                    placeholder="请输入用户名"
                    @keyup.enter="handleLogin"
                >
              </div>
            </div>
            <div class="form-item">
              <div class="input-wrapper">
                <i class="iconfont icon-password"></i>
                <input
                    type="password"
                    v-model="password"
                    placeholder="请输入密码"
                    @keyup.enter="handleLogin"
                >
              </div>
            </div>
            <div class="form-item">
              <dv-border-box-12 class="login-button" @click="handleLogin">
                <span>立即登录</span>
              </dv-border-box-12>
            </div>
            <div class="register-link">
              还没有账号？
              <el-button type="text" @click="goToRegister">立即注册</el-button>
            </div>
          </div>
        </div>
      </dv-border-box-12>
    </div>
  </dv-full-screen-container>

</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { login } from '@/api/user';
import { ElMessage } from 'element-plus';

export default {
  name: 'Login',
  setup() {
    const router = useRouter();
    const username = ref('');
    const password = ref('');

    const handleLogin = async () => {
      if (!username.value || !password.value) {
        ElMessage.error('请输入用户名和密码');
        return;
      }

      try {
        const res = await login({
          username: username.value,
          password: password.value
        });
        
        console.log('登录响应数据:', res);

        if (res.code === 200) {
          localStorage.setItem('userInfo', JSON.stringify({
            username: username.value
          }));
          ElMessage.success(res.message || '登录成功');
          await router.replace('/');
          console.log('路由跳转完成');
        } else {
          ElMessage.error(res.message || '登录失败');
        }
      } catch (error) {
        console.error('登录失败:', error);
        const errMsg = error.response?.data?.message || 
                      error.response?.data?.error || 
                      error.message || 
                      '用户名或密码错误';
        ElMessage.error(errMsg);
      }
    };

    const goToRegister = () => {
      router.push('/register')
    }

    return {
      username,
      password,
      handleLogin,
      goToRegister
    };
  }
};
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  padding: 16px 16px 0 16px;
  background-image: url('@/assets/img.png');
  background-size: cover;
  background-position: center center;
}
.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-box {
  width: 400px;
  height: 320px;
  padding: 20px;
}

.login-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 28, 36, 0.5);
  border-radius: 4px;
  padding: 20px;
}

.login-header {
  margin-bottom: 30px;
}

.login-header h2 {
  color: #00ffd9;
  font-size: 24px;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-item {
  width: 100%;
}

.input-wrapper {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  background: rgba(0, 28, 36, 0.3);
  border-radius: 4px;
  padding: 0 10px;
  border: 1px solid rgba(0, 255, 217, 0.3);
}

.input-wrapper i {
  color: #00ffd9;
  font-size: 20px;
  margin-right: 10px;
}

.input-wrapper input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
}

.input-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.login-button {
  --border-color: #00ffd9;
  --border-alpha: 0.3;
  width: 100%;
  height: 45px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.login-button span {
  color: #00ffd9;
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  margin-top: 4px;
  width: 100%;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.login-button:hover span {
  color: #fff;
  text-shadow: 0 0 15px rgba(0, 255, 217, 0.5);
}

.register-link {
  text-align: center;
  margin-top: 15px;
  color: #00ffd9;
}

.register-link .el-button {
  color: #00ffd9;
  font-weight: bold;
}

.register-link .el-button:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}
</style> 